<!-- 工业产品 -->
<template>
  <div class="industrialProduct">
    <div class="tabbar">
      <div
        :class="['item', { active: currentActive.name == i.name }]"
        v-for="(i, k) in tabbarList"
        :key="k"
        @click="setActive(i)"
      >
        {{ i.name }}
      </div>
    </div>
    <div class="table">
      <div class="table-header">
        <div
          class="header-item"
          v-for="(i, k) in tableConfig"
          :key="k"
          :style="` width: ${i.width} `"
        >
          <div class="label">{{ i.label }}</div>
        </div>
      </div>
      <div class="list">
        <div class="data" v-for="(i, k) in tableData" :key="k">
          <div class="item" style="width: 25%">{{ k + 1 }}</div>
          <div class="item" style="width: 25%">{{ i.productName }}</div>
          <div class="item" style="width: 25%">{{ i.price }}</div>
          <div
            class="item"
            :style="`width: 25%;font-weight:bold;color:${
              i.riseAndFall == 'rise' ? '#FF3E3E' : '#18C624'
            }`"
          >
            <img
              v-if="i.riseAndFall == 'rise'"
              class="img"
              src="@/assets/industrialOperation/red-rise.png"
              alt=""
            />
            <img
              class="img"
              v-else
              src="@/assets/industrialOperation/fall.png"
              alt=""
            />
            {{ i.range }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      tableConfig: [
        {
          label: '序号',
          width: '25%'
        },
        {
          label: '商品名称',
          width: '25%'
        },
        {
          label: '周末价格',
          width: '25%'
        },
        {
          label: '周波动幅度',
          width: '25%'
        }
      ],
      tableData: [
        {
          productName: '商品名称',
          price: '1029',
          riseAndFall: 'rise',
          range: '12%'
        },
        {
          productName: '商品名称',
          price: '1029',
          riseAndFall: 'fall',
          range: '12%'
        },
        {
          productName: '商品名称',
          price: '1029',
          riseAndFall: 'rise',
          range: '12%'
        }
      ],
      tabbarList: [
        {
          name: '价格',
          val: 'jg'
        },
        {
          name: '产量',
          val: 'cl'
        },
        {
          name: '效益',
          val: 'xy'
        }
      ],
      currentActive: { name: '价格', val: 'jg' }
    }
  },
  methods: {
    setActive(item) {
      this.currentActive = item
    }
  }
}
</script>
<style lang="scss" scoped>
.industrialProduct {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  .tabbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    .item {
      background: rgba(173, 195, 215, 0.6);
      border-radius: 3px 3px 3px 3px;
      border: 1px solid rgba(25, 64, 112, 1);
      font-family: MicrosoftYaHeiUI;
      font-size: 16px;
      color: #adc3df;
      padding: 5px 14px;
      cursor: pointer;
    }
    .active {
      background: #579cf4;
      border: 1px solid #579cf4;
      font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
      font-weight: bold;
      font-size: 16px;
      color: #feffff;
    }
  }
  .table {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    .table-header {
      height: 45px;
      display: flex;
      align-items: center;
      margin-top: 10px;
      box-sizing: border-box;
      background-color: rgba(17, 53, 94, 0.7);
      border-bottom: 2px solid #548fda;
      .header-item {
        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        .label {
          text-align: center;
        }
      }
    }
    .list {
      overflow: auto;
      padding: 0 5px;
      .data {
        display: flex;
        height: 47px;
        line-height: 47px;
        border: none;
        background-color: rgba(17, 53, 94, 0.36);
        position: relative;
        margin-top: 7px;
        box-sizing: border-box;

        &:after {
          content: '';
          width: 2px;
          height: 16px;
          background: #27b0f7;
          position: absolute;
          top: 15px;
          left: 0;
        }
        &::before {
          content: '';
          width: 2px;
          height: 16px;
          background: #27b0f7;
          position: absolute;
          top: 15px;
          right: 0;
        }
        .item {
          text-align: center;
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          .img {
            width: 12px;
            height: 16px;
            margin-right: 5px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
